<template>
    <router-link  :to="href" class="g-item">
        <div class="media"
              :style="{
                backgroundImage:'url('+ thumSrc +')',
                height: imgHeight + 'px'
              }">
            <span class="label primary" v-if="labelText">{{labelText}}</span>
            <div class="video-btn" v-if="isVideo"><i class="icon icon-play"></i></div>
        </div>

        <div class="info" v-if="title">
          <h2>{{ title }}</h2>
          <p class="flex jc-sb">
            {{desc}}
          </p>
        </div>
    </router-link>
</template>

<script>

export default {
    name: 'gItem',
    props:{
        href: {
          type : String,
          default : ''
        },
        thumSrc:{
          type : String,
          default : 'assets/img/image.jpg'
        },
        isVideo:{
          type : Boolean,
          default : false
        },
        labelText:  String,
        title: String,
        desc: String,
        imgHeight: {
          type:String,
          default:'120'
        },
    },
    data(){
        return{

        }
    },
    methods:{

    }
}
</script>

<style lang="stylus">
@import 'assets/stylus/base'
.g-item
  background: #fff
  border-radius: 0
  display: block
  .media
    transition: all .3s
    border-radius: 0
    overflow: hidden
    position: relative
    display: block
    bg-box(100px)
    img
      width: 100%
      display: block
      transition: all 0.3s
    .label
      position: absolute
      left: 0
      top: 0
      border-radius: $border-radius 0 $border-radius 0
      background: rgba($primary, 0.8)
      font-size: 12px
      padding: 0 10px
      line-height: 20px
      color: #fff
      &.bg-red
        background: rgba($red, 0.8)

  .info
    padding: 10px 0
    background-color: #fff
  h2
    display: block
    font-size: $font-sm
    color: $text-dark
    font-weight: normal
    line-height: 1.6
    ellipsis()
    padding: 0
  p
    display: flex
    align-items: center
    font-size: $font-xs
    color: $text-light
    ellipsis()
    .price
      font-size: 14px
      margin-right: 10px



</style>
